<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜锦晖苹果Mac桌面</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
        <div class="video">
            <audio src="source/nianlunshuo.mp3 " controls="controls" autoplay="autoplay">你的浏览器不支持audio 标签</audio>
        </div>
    <!--头部-->
    <header id="header">
        <!--头部的左边-->
        <ul class="header-left">
            <li><a href="" class=" glyphicon glyphicon-apple"></a></li>
            <li><a href="">I.likeit</a></li>
            <li><a href="">文件</a></li>
            <li><a href="">编辑</a></li>
            <li><a href="">显示</a></li>
            <li><a href="">帮助</a></li>
        </ul>
        <!--头部的右边-->
        <ul class="header-right">
            <li class="glyphicon glyphicon-volume-up"></li>
            <li class="glyphicon glyphicon-align-left"></li>
            <li class="glyphicon glyphicon-question-sign"></li>
            <li class="glyphicon glyphicon-leaf"></li>
        </ul>
    </header>

    <!--中间的内容-->
    <section id="content">

        <div class="file">
            <audio src="source/nianlunshuo.mp3" controls="controls"
                   autoplay="autoplay"></audio>
        </div>

        <div class="file">
            <img src="images/file.png" alt="">
            <p>文件夹</p>
        </div>

        <div class="file">
            <img src="images/file.png" alt="">
            <p>陈飞宇文件夹</p>
        </div>

        <div class="file">
            <img src="images/file.png" alt="">
            <p>欧阳娜娜文件夹</p>
        </div>



    </section>


    <!--尾部-->
    <footer id="footer">
        <div class="dock">
            <ul>
                <li><a href="#"><img src="images/zurb-icon.png"></a></li>
                <li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
                <li><a href="#"><img src="images/notable-icon.png"></a> </li>
                <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="images/google-icon.png"></a> </li>
                <li><a href="#"><img src="images/notable-icon.png"></a> </li>
                <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="images/google-icon.png"></a> </li>
            </ul>
        </div>
    </footer>

</body>
</html>